<script setup>
import {ref} from "vue";
import EditContainer from "@/components/AdminConponents/EditContainer.vue";
import {useRouter} from "vue-router";
import {Plus} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
import {formatToLocalDate} from "@/utils/format.js";
import {publisherAddAPI} from "@/api/AdminApi/publisher.js";

const publisherInfo = ref({
  name: '',
  createDate: '',
  icon: '',
  link: '',
  introduction: ''
})
const imageFile = ref()

// 选择图片
const onSelectFile = (uploadFile) => {
  if (uploadFile) {
    const file = uploadFile.raw || uploadFile; // 根据你的框架或库可能需要调整
    // 检查文件是否为 JPG 格式
    if (file.type !== 'image/jpeg') {
      ElMessage.error('文件格式必须是jpg!')
      return;
    } else if (file.size / 1024 / 1024 > 4) {
      ElMessage.error('文件大小不得超过 4MB!')
      return false
    }
    // 文件是 JPG 格式，创建一个临时 URL
    imageFile.value = file
    const iconUrl = URL.createObjectURL(file);
    // 将 URL 设置给 publisherInfo.icon 用于预览
    publisherInfo.value.icon = iconUrl
    // 注意：当不再需要这个临时 URL 时，应该释放它
    // URL.revokeObjectURL(tempUrl);
  }
}

// 取消按钮
const router = useRouter()
const cancel = () => {
  router.go(-1)
}

const rules = {
  name: [
    { required: true, message: '请输入名称', trigger: 'blur' }
  ],
  createDate: [
    { required: true, message: '请选择日期', trigger: 'blur' }
  ],
  link: [
    { required: true, message: '请输入链接', trigger: 'blur' }
  ]
}

const formRef = ref()
// 修改按钮
const add = async () => {
  await formRef.value.validate()
  publisherInfo.value.createDate = formatToLocalDate(publisherInfo.value.createDate)
  const res = await publisherAddAPI(publisherInfo.value, imageFile.value)
  if (res.code === 1) {
    ElMessage.success("添加成功")
    router.push("/admin/publisher/list")
  } else {
    ElMessage.error(res.msg)
  }
}
</script>

<template>
  <EditContainer title="添加发行商">
    <template #body>
      <el-form ref="formRef" :model="publisherInfo" :rules="rules" label-width="auto" style="max-width: 1200px">
        <el-form-item label="发行商名称" prop="name">
          <el-input v-model="publisherInfo.name"></el-input>
        </el-form-item>
        <el-form-item label="创建日期" prop="createDate">
          <el-date-picker
              v-model="publisherInfo.createDate"
              type="date"
              placeholder="请选择创建日期"
          />
        </el-form-item>
        <el-form-item label="图标">
          <el-upload
              ref="uploadRef"
              :auto-upload="false"
              class="icon-uploader"
              :show-file-list="false"
              :on-change="onSelectFile">
            <el-image v-if="publisherInfo.icon" :src="publisherInfo.icon" class="icon"/>
            <el-icon v-else class="icon-uploader-icon">
              <Plus/>
            </el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="社交账号链接" prop="link">
          <el-input v-model="publisherInfo.link"></el-input>
        </el-form-item>
        <el-form-item label="介绍">
          <el-input
              v-model="publisherInfo.introduction"
              type="textarea"
              :rows="10"
              style="resize: none;"
          />
        </el-form-item>
      </el-form>
    </template>
    <template #footerLeft>
      <el-button class="button" @click="cancel" type="info">取消</el-button>
    </template>
    <template #footerRight>
      <el-button class="button" @click="add" type="primary">添加</el-button>
    </template>
  </EditContainer>
</template>

<style scoped lang="scss">
.icon-uploader {
  :deep {
    .icon {
      width: 150px;
      height: 150px;
      display: block;
    }

    .el-upload {
      width: 150px;
      height: 150px;
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }

    .el-upload:hover {
      border-color: var(--el-color-primary);
    }

    .el-icon.icon-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 278px;
      height: 278px;
      text-align: center;
    }
  }
}
</style>
